<template>
  <div class="zhaokao-container">
    <div class="search-container">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="标题">
          <el-input v-model="searchForm.title" placeholder="请输入标题" clearable @clear="handleSearch" />
        </el-form-item>
        <el-form-item label="发布人">
          <el-input v-model="searchForm.createdName" placeholder="请输入发布人" clearable @clear="handleSearch" />
        </el-form-item>
        <el-form-item label="招考类型">
          <el-select v-model="searchForm.types" placeholder="请选择招考类型" clearable multiple collapse-tags
            collapse-tags-tooltip @clear="handleSearch" @change="handleSearch">
            <el-option v-for="item in zhaokaoTypes" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="省份">
          <el-input v-model="searchForm.provinces" placeholder="请选择省份" clearable @clear="handleSearch"
            @click="showProvinceDialog" readonly />
        </el-form-item>
        <el-form-item label="城市">
          <el-input v-model="searchForm.city" placeholder="请输入城市" clearable @clear="handleSearch" />
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker v-model="publishTimeRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" @change="handleSearch" />
        </el-form-item>
        <el-form-item label="报名时间">
          <el-date-picker v-model="signupTimeRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" @change="handleSearch" />
        </el-form-item>
        <el-form-item>
          <el-button icon="Search" @click="handleSearch">搜索</el-button>
          <el-button icon="Refresh" @click="handleReset">重置</el-button>
          <el-button type="success" icon="Plus" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="tableData" style="width: 100%" :height="tableHeight" border stripe highlight-current-row
      :header-cell-style="{
        background: '#f5f7fa',
        color: '#606266',
        fontWeight: 600,
        textAlign: 'center',
      }" :cell-style="{
        textAlign: 'center',
      }">
      <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip>
        <template #default="scope">
          <span class="title-link" @click="handleView(scope.row)">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="招考类型" width="120">
        <template #default="scope">
          <el-tag size="small" type="warning" v-if="scope.row.type">
            {{ scope.row.type }}
          </el-tag>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="source" label="来源" width="120" />
      <el-table-column prop="link" label="链接" min-width="180" show-overflow-tooltip>
        <template #default="scope">
          <a v-if="scope.row.link" :href="scope.row.link" target="_blank" class="link-text">
            {{ scope.row.link }}
          </a>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="publishTime" label="发布时间" width="160">
        <template #default="scope">
          {{ formatDate(scope.row.publishTime) }}
        </template>
      </el-table-column>
      <el-table-column label="报名时间" width="200">
        <template #default="scope">
          <div class="signup-time">
            <div>{{ formatDate(scope.row.signupStartTime) }}</div>
            <div>至</div>
            <div>{{ formatDate(scope.row.signupEndTime) }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="reshu" label="招录人数" width="100">
        <template #default="scope">
          <el-tag size="small" type="success" v-if="scope.row.reshu">{{ scope.row.reshu }}人</el-tag>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="地区" width="150">
        <template #default="scope">
          {{ `${scope.row.province || ''} ${scope.row.city || ''} ${scope.row.district || ''}` }}
        </template>
      </el-table-column>
      <el-table-column prop="createdName" label="发布人" width="100" fixed="right"></el-table-column>

      <el-table-column prop="isShow" label="展示" width="100" fixed="right">
        <template #default="scope">
          <el-switch v-model="scope.row.isShow" @change="val => handleShowChange(val, scope.row)"
            :loading="scope.row.updatingShow" />
        </template>
      </el-table-column>
      <el-table-column prop="isHot" label="热点" width="100" fixed="right">
        <template #default="scope">
          <el-switch v-model="scope.row.isHot" @change="val => handleHotChange(val, scope.row)"
            :loading="scope.row.updating" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" fixed="right">
        <template #default="scope">
          <div style="display: flex; justify-content: space-evenly">
            <el-button type="success" size="small" @click="handleView(scope.row)">查看</el-button>
            <el-button type="info" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper" background />
    </div>

    <el-drawer v-model="dialogVisible" :title="currentRow?.title || '详情'" size="60%" :close-on-click-modal="false"
      destroy-on-close direction="rtl">
      <div class="detail-container">
        <div class="info-row">
          <span class="label">发布时间：</span>
          <span>{{ formatDate(currentRow?.publishTime) }}</span>
        </div>
        <div class="info-row">
          <span class="label">报名时间：</span>
          <span>{{ formatDate(currentRow?.signupStartTime) }} 至
            {{ formatDate(currentRow?.signupEndTime) }}</span>
        </div>
        <div class="info-row">
          <span class="label">招考类型：</span>
          <el-tag size="small" type="warning" v-if="currentRow?.type">
            {{ currentRow?.type }}
          </el-tag>
          <span v-else>-</span>
        </div>
        <div class="info-row">
          <span class="label">招录人数：</span>
          <span>{{ currentRow?.reshu ? `${currentRow.reshu}人` : '-' }}</span>
        </div>
        <div class="info-row">
          <span class="label">地区：</span>
          <span>{{
            currentRow
              ? `${currentRow.province || ''} ${currentRow.city || ''} ${currentRow.district || ''}`
              : '-'
          }}</span>
        </div>
        <div class="info-row" v-if="currentRow?.signremark">
          <span class="label">报名说明：</span>
          <span>{{ currentRow.signremark }}</span>
        </div>
        <div class="content-container">
          <div class="content-title">详细内容：</div>
          <div class="content" v-html="currentRow?.content"></div>
        </div>
        <div class="attachments-container" v-if="currentRow?.attachments && currentRow.attachments.length > 0">
          <div class="attachments-header">
            <span class="attachments-title">附件列表</span>
          </div>
          <div class="attachments-list">
            <div v-for="(item, index) in currentRow.attachments" :key="index" class="attachment-item">
              <div class="attachment-info" @click="handleLink(item.url)">
                <span class="attachment-name">{{ item.name }}</span>
                <span class="attachment-url">{{ item.url }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>

    <el-drawer v-model="addDrawerVisible" :title="title" size="60%" :close-on-click-modal="false" destroy-on-close
      direction="rtl">
      <div class="form-container">
        <el-form ref="addFormRef" :model="addForm" :rules="rules" label-width="120px" class="add-form">
          <div class="form-section">
            <div class="section-title">基本信息</div>
            <el-form-item label="发布人" prop="createdBy">
              <el-select v-model="addForm.createdBy" placeholder="请选择发布人" clearable>
                <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="addForm.title" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="招考类型" prop="type" class="type-selection">
              <el-radio-group v-model="addForm.type">
                <el-radio-button v-for="item in zhaokaoTypes" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="来源" prop="source">
              <el-input v-model="addForm.source" placeholder="请输入来源" />
            </el-form-item>
            <el-form-item label="链接" prop="link">
              <el-input v-model="addForm.link" placeholder="请输入链接" />
            </el-form-item>
            <el-form-item label="发布时间" prop="publishTime">
              <el-date-picker v-model="addForm.publishTime" type="datetime" placeholder="选择日期时间"
                value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
            </el-form-item>
            <el-form-item label="详细内容" prop="content">
              <!-- <wang v-if="title === '新增招考信息'" :isCustomHtml="true" :zhaokaoId="addForm.id" :content="addForm.content"
                height="300px" width="100%" v-model="addForm.content" ref="richEditorRef" />
              <wang v-else :isCustomHtml="true" :zhaokaoId="addForm.id" :content="addForm.content" height="300px"
                width="100%" ref="richEditorRef" /> -->
              <ai-editor :value="addForm.content" @change="getEditorValue" />
            </el-form-item>
          </div>

          <div class="form-section">
            <div class="section-title">时间信息</div>
            <el-form-item label="报名时间" class="signup-time-container">
              <el-col :span="11">
                <el-form-item prop="signupStartTime" class="no-margin">
                  <el-date-picker v-model="addForm.signupStartTime" type="datetime" placeholder="开始时间"
                    value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="2" class="text-center">
                <span class="text-gray-500">至</span>
              </el-col>
              <el-col :span="11">
                <el-form-item prop="signupEndTime" class="no-margin">
                  <el-date-picker v-model="addForm.signupEndTime" type="datetime" placeholder="结束时间"
                    value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item label="报名时间说明" prop="signremark">
              <el-input v-model="addForm.signremark" type="textarea" :rows="6" placeholder="请输入报名时间说明" />
            </el-form-item>
          </div>

          <div class="form-section">
            <div class="section-title">地区与人数</div>
            <el-form-item label="招录人数" prop="reshu">
              <el-input-number v-model="addForm.reshu" :min="0" placeholder="请输入招录人数" style="width: 100%" />
            </el-form-item>
            <el-form-item label="省份" prop="province">
              <el-radio-group v-model="addForm.province" @change="handleAddFormProvinceChange">
                <el-radio-button v-for="item in provinces" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="城市" prop="city">
              <el-checkbox-group v-model="addForm.city" :disabled="!addForm.province">
                <el-checkbox v-for="item in addFormCities" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>

          <div class="form-section">
            <div class="section-title">其他设置</div>
            <div class="switch-container">
              <el-form-item label="是否展示" prop="isShow">
                <el-switch v-model="addForm.isShow" />
              </el-form-item>
              <el-form-item label="是否热点" prop="isHot">
                <el-switch v-model="addForm.isHot" />
              </el-form-item>
            </div>
            <div class="attachments-container">
              <div class="attachments-header">
                <span class="attachments-title">附件列表</span>
                <!-- <el-button type="primary" @click="handleAddAttachment">添加附件</el-button> -->
              </div>
              <div class="attachments-list">
                <div v-for="(item, index) in addForm.attachments" :key="index" class="attachment-item">
                  <div class="attachment-info" @click="handleLink(item.url)">
                    <span class="attachment-name">{{ item.name }}</span>
                    <span class="attachment-url">{{ item.url }}</span>
                  </div>
                  <el-button type="danger" link @click="handleRemoveAttachment(index)">删除</el-button>
                </div>
                <div class="attachment-input">
                  <custom-upload v-model="addForm.attachments" :action="serverDefaultCfg.ossURL" :data="{}"
                    :headers="{}" :multiple="true" />
                </div>
              </div>
            </div>
          </div>

          <div class="form-footer">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="addDrawerVisible = false">取消</el-button>
          </div>
        </el-form>
      </div>
      <!-- 不要icon -->
      <el-button style="position: fixed; bottom: 50%; right: 10px;" type="primary" @click="submitForm">提交</el-button>

    </el-drawer>

    <el-dialog v-model="provinceDialogVisible" title="选择省份" width="60%" :close-on-click-modal="false">
      <div class="province-container">
        <el-checkbox-group v-model="selectedProvinces" @change="handleProvinceChange">
          <div class="province-grid">
            <el-checkbox v-for="item in provinces" :key="item.value" :label="item.value" class="province-item">
              {{ item.label }}
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="provinceDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmProvinceSelection">确定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'formZhaokao',
};
</script>

<script setup>
import AiEditor from '@/components/aiEditor/aiEditor.vue';
import { ref, onMounted, computed } from 'vue';
import {
  getZhaokaoInfo,
  deleteZhaokaoInfo,
  getDict,
  createZhaokaoInfo,
  getZhaokaoInfoById,
  getUserList,
} from '@/api/zhaokao/zhaokao';
import { ElMessage, ElMessageBox } from 'element-plus';
import cityData from '@/api/zhaokao/citydata';
import customUpload from '@/components/CustomUpload/index.vue';
import { serverDefaultCfg } from '@/common/http/config';
const tableHeight = computed(() => {
  return serverDefaultCfg.tableHeight;
});

const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const publishTimeRange = ref([]);
const signupTimeRange = ref([]);
const currentRow = ref(null);
const dialogVisible = ref(false);
const addDrawerVisible = ref(false);
const addFormRef = ref(null);
const addForm = ref({
  title: '',
  type: '',
  source: '',
  link: '',
  publishTime: '',
  signupStartTime: '',
  signupEndTime: '',
  reshu: 0,
  province: '',
  city: [],
  isShow: true,
  isHot: false,
  content: '',
  attachments: [],
  signremark: '',
});
const zhaokaoTypes = ref([]);
const getHtml = html => {
  console.log('html', html);
  addForm.value.content = html;
};
const userList = ref([]);
getUserList().then(res => {
  if (res.success) {
    console.log(res.data);
    userList.value = res.data.map(item => ({
      value: item.userId,
      label: item.showName,
    }));
  }
});

const provinces = computed(() => {
  const arr = cityData
    .map(item => ({
      value: item.value,
      label: item.label,
    }))
    .sort((a, b) => a.label.localeCompare(b.label, 'zh-CN'));
  // 插入国家
  arr.unshift({
    value: '国家',
    label: '国家',
  });
  console.log('arr', arr);
  return arr;
});

const addFormCities = computed(() => {
  if (!addForm.value.province) return [];
  const province = cityData.find(item => item.value === addForm.value.province);
  return province?.children || [];
});

const searchForm = ref({
  title: '',
  types: [],
  provinces: [],
  city: '',
  publishStartTime: '',
  publishEndTime: '',
  signupStartTime: '',
  signupEndTime: '',
});

const rules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  type: [{ required: false, message: '请输入招考类型', trigger: 'blur' }],
  publishTime: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
  province: [{ required: true, message: '请选择省份', trigger: 'change' }],
  content: [{ required: false, message: '请输入详细内容', trigger: 'blur' }],
  createdBy: [{ required: false, message: '请选择发布人', trigger: 'change' }],
};

const newAttachment = ref({
  name: '',
  url: '',
});

const formatDate = date => {
  if (!date) return '-';
  const d = new Date(date);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(
    d.getDate(),
  ).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(
    2,
    '0',
  )}`;
};

const handleView = row => {
  getZhaokaoInfoById(row.id)
    .then(res => {
      if (res.success) {
        currentRow.value = res.data;
        dialogVisible.value = true;
      } else {
        ElMessage.error(res.message || '获取详情失败');
      }
    })
    .catch(() => {
      ElMessage.error('获取详情失败');
    });
};
const title = ref('新增招考信息');
const handleEdit = row => {
  title.value = '编辑招考信息';
  getZhaokaoInfoById(row.id)
    .then(res => {
      if (res.success) {
        // 复制行数据到表单
        addForm.value = {
          ...res.data,
          // 确保日期格式正确
          publishTime: res.data.publishTime || '',
          signupStartTime: res.data.signupStartTime || '',
          signupEndTime: res.data.signupEndTime || '',
          // 确保数字类型正确
          reshu: res.data.reshu || 0,
          // 确保布尔类型正确
          isShow: res.data.isShow ?? true,
          isHot: res.data.isHot ?? false,
          // 确保数组类型正确
          attachments: res.data.attachments || [],
          // 将城市字符串转换为数组
          city: res.data.city ? res.data.city.split(',') : []
        };
        // 重置表单验证状态
        if (addFormRef.value) {
          addFormRef.value.resetFields();
        }
        addDrawerVisible.value = true;
      } else {
        ElMessage.error(res.message || '获取详情失败');
      }
    })
    .catch(() => {
      ElMessage.error('获取详情失败');
    });
};

const handleAdd = () => {
  title.value = '新增招考信息';
  // 重置表单内容
  addForm.value = {
    title: '',
    type: '',
    source: '',
    link: '',
    publishTime: '',
    signupStartTime: '',
    signupEndTime: '',
    reshu: 0,
    province: '',
    city: [],
    isShow: true,
    isHot: false,
    content: '',
    attachments: [],
    signremark: '',
  };
  // 重置表单验证状态
  if (addFormRef.value) {
    addFormRef.value.resetFields();
  }
  addDrawerVisible.value = true;
};

const handleLink = link => {
  if (link) {
    // 检查是否是完整的URL
    const isCompleteUrl = /^https?:\/\//i.test(link);
    // 如果不是完整URL，添加https://前缀
    const completeUrl = isCompleteUrl ? link : `https://${link}`;
    window.open(completeUrl, '_blank');
  }
};

const handleSizeChange = val => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = val => {
  currentPage.value = val;
  fetchData();
};

const handleSearch = () => {
  currentPage.value = 1;
  // 处理发布时间范围
  if (publishTimeRange.value && publishTimeRange.value.length === 2) {
    searchForm.value.publishStartTime = publishTimeRange.value[0];
    searchForm.value.publishEndTime = publishTimeRange.value[1];
  } else {
    searchForm.value.publishStartTime = '';
    searchForm.value.publishEndTime = '';
  }
  // 处理报名时间范围
  if (signupTimeRange.value && signupTimeRange.value.length === 2) {
    searchForm.value.signupStartTime = signupTimeRange.value[0];
    searchForm.value.signupEndTime = signupTimeRange.value[1];
  } else {
    searchForm.value.signupStartTime = '';
    searchForm.value.signupEndTime = '';
  }
  fetchData();
};

const handleReset = () => {
  // 重置所有搜索条件
  searchForm.value = {
    title: '',
    types: [],
    provinces: [],
    city: '',
    publishStartTime: '',
    publishEndTime: '',
    signupStartTime: '',
    signupEndTime: '',
  };
  // 重置时间选择器
  publishTimeRange.value = null;
  signupTimeRange.value = null;
  // 重置分页
  currentPage.value = 1;
  // 重新加载数据
  fetchData();
};

const fetchData = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    ...searchForm.value,
  };

  getZhaokaoInfo(params).then(res => {
    if (res.success) {
      tableData.value = res.data.records || [];
      total.value = res.data.total || 0;
    }
  });
};

const handleDelete = row => {
  ElMessageBox.confirm('确定要删除该条招考信息吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      deleteZhaokaoInfo(row.id)
        .then(res => {
          if (res.success) {
            ElMessage.success('删除成功');
            fetchData();
          } else {
            ElMessage.error(res.message || '删除失败');
          }
        })
        .catch(() => {
          ElMessage.error('删除失败');
        });
    })
    .catch(() => {
      ElMessage.info('已取消删除');
    });
};
const richEditorRef = ref(null);
const submitForm = () => {
  // ref="richEditorRef"
  // console.log(richEditorRef.value.getHtml());


  // return;



  let createName = userList.value.find(item => item.value === addForm.value.createdBy);
  if (createName) {
    addForm.value.createdName = createName.label;
  }

  if (!addFormRef.value) return;
  addFormRef.value.validate(valid => {
    if (valid) {
      if (title.value == '编辑招考信息') {
        // addForm.value.content = richEditorRef.value.getHtml();
      }
      // Convert city array to comma-separated string before submitting
      const formData = {
        ...addForm.value,
        city: addForm.value.city.join(',')
      };
      createZhaokaoInfo(formData)
        .then(res => {
          if (res.success) {
            ElMessage.success('提交成功');
            addDrawerVisible.value = false;
            fetchData(); // 刷新列表数据
          } else {
            ElMessage.error(res.message || '提交失败');
          }
        })
        .catch(() => {
          ElMessage.error('提交失败');
        });
    }
  });
};

const fetchDictData = () => {
  getDict('zhaokaoType').then(res => {
    if (res.success) {
      // 使用 fullResultList 作为字典数据
      const dictList = res.data.fullResultList || [];
      zhaokaoTypes.value = dictList.map(item => ({
        label: item.name,
        value: item.name,
      }));
    }
  });
};

const handleAddFormProvinceChange = () => {
  addForm.value.city = [];
};

const handleAddAttachment = () => {
  newAttachment.value = {
    name: '',
    url: '',
  };
};

const handleSubmitAttachment = () => {
  if (!newAttachment.value.name || !newAttachment.value.url) {
    ElMessage.warning('请填写完整的附件信息');
    return;
  }
  addForm.value.attachments.push({
    name: newAttachment.value.name,
    url: newAttachment.value.url,
  });
  newAttachment.value = {
    name: '',
    url: '',
  };
};

const handleRemoveAttachment = index => {
  addForm.value.attachments.splice(index, 1);
};

const provinceDialogVisible = ref(false);
const selectedProvinces = ref([]);

const showProvinceDialog = () => {
  provinceDialogVisible.value = true;
  // 初始化选中的省份
  selectedProvinces.value = [...searchForm.value.provinces];
};

const handleProvinceChange = value => {
  selectedProvinces.value = value;
};

const confirmProvinceSelection = () => {
  searchForm.value.provinces = [...selectedProvinces.value];
  provinceDialogVisible.value = false;
  handleSearch();
};

const handleShowChange = (val, row) => {
  row.updatingShow = true;
  createZhaokaoInfo({ ...row, isShow: val })
    .then(res => {
      if (res.success) {
        ElMessage.success('更新成功');
      } else {
        ElMessage.error(res.message || '更新失败');
        row.isShow = !val; // 更新失败时恢复原值
      }
    })
    .catch(() => {
      ElMessage.error('更新失败');
      row.isShow = !val; // 更新失败时恢复原值
    })
    .finally(() => {
      row.updatingShow = false;
    });
};

const handleHotChange = (val, row) => {
  row.updating = true;
  createZhaokaoInfo({ ...row, isHot: val })
    .then(res => {
      if (res.success) {
        ElMessage.success('更新成功');
      } else {
        ElMessage.error(res.message || '更新失败');
        row.isHot = !val; // 更新失败时恢复原值
      }
    })
    .catch(() => {
      ElMessage.error('更新失败');
      row.isHot = !val; // 更新失败时恢复原值
    })
    .finally(() => {
      row.updating = false;
    });
};

const getEditorValue = (value) => {
  // console.log(111);

  addForm.value.content = value
}

onMounted(() => {
  fetchData();
  fetchDictData();
});
</script>

<style scoped>
.zhaokao-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-container {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 10px;
}

.search-form :deep(.el-input) {
  width: 200px;
}

.search-form :deep(.el-select) {
  width: 200px;
}

.el-table {
  margin-top: 20px;
}

.title-link {
  color: #409eff;
  cursor: pointer;
  /* 换行 */
  white-space: normal;
  word-break: break-all;
}

.title-link:hover {
  text-decoration: underline;
}

.signup-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
}

.stats span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #606266;
}

.stats i {
  font-size: 16px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-table__header) th {
  padding: 12px 0;
}

:deep(.el-table__row) td {
  padding: 8px 0;
}

.link-text {
  color: #409eff;
  text-decoration: none;
}

.link-text:hover {
  text-decoration: underline;
}

.search-form :deep(.el-date-editor) {
  width: 340px;
}

.detail-container {
  padding: 24px;
  background: #fff;
  height: 100%;
}

.info-row {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.info-row:hover {
  background: #f0f2f5;
  transform: translateX(4px);
}

.info-row .label {
  font-weight: 600;
  width: 120px;
  color: #303133;
  position: relative;
  padding-left: 12px;
}

.info-row .label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: #409eff;
  border-radius: 2px;
}

.content-container {
  margin-top: 30px;
  border-top: 2px solid #ebeef5;
  padding-top: 24px;
}

.content-title {
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  font-size: 16px;
  position: relative;
  padding-left: 12px;
}

.content-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: #409eff;
  border-radius: 2px;
}

.content {
  line-height: 1.8;
  color: #303133;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.content :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin: 16px 0;
}

.content :deep(p) {
  margin: 12px 0;
}

.content :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.content :deep(td),
.content :deep(th) {
  border: 1px solid #ebeef5;
  padding: 12px;
  background: #fff;
}

.content :deep(th) {
  background: #f5f7fa;
  font-weight: 600;
}

:deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 20px 24px;
  border-bottom: 2px solid #ebeef5;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

:deep(.el-drawer__body) {
  padding: 0;
  height: calc(100% - 65px);
  overflow-y: auto;
}

:deep(.el-drawer__body::-webkit-scrollbar) {
  width: 8px;
}

:deep(.el-drawer__body::-webkit-scrollbar-track) {
  background: #f1f1f1;
  border-radius: 4px;
}

:deep(.el-drawer__body::-webkit-scrollbar-thumb) {
  background: #c0c4cc;
  border-radius: 4px;
}

:deep(.el-drawer__body::-webkit-scrollbar-thumb:hover) {
  background: #909399;
}

.form-container {
  padding: 20px;
}

.text-center {
  text-align: center;
  line-height: 32px;
}

:deep(.el-form-item__content) {
  flex-wrap: nowrap;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-input-number) {
  width: 100%;
}

.form-section {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 24px;
  padding-left: 12px;
  border-left: 4px solid #409eff;
  line-height: 1;
}

.type-selection,
.el-radio-group {
  :deep(.el-radio-group) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  :deep(.el-radio-button__inner) {
    border-radius: 4px;
    padding: 8px 20px;
  }
}

.signup-time-container {
  margin-bottom: 0;

  :deep(.el-col) {
    display: flex;
    align-items: center;
  }
}

.area-container {
  :deep(.el-col) {
    padding: 0 8px;

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
    }
  }
}

.switch-container {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;

  :deep(.el-form-item) {
    margin-bottom: 0;
  }
}

.form-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #ebeef5;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner) {
  box-shadow: none;
  border: 1px solid #dcdfe6;
  transition: all 0.3s ease;

  &:hover {
    border-color: #409eff;
  }
}

:deep(.el-form-item.is-error .el-input__wrapper) {
  box-shadow: none !important;
  border-color: #f56c6c;
}

.add-form {
  padding: 0 20px;
}

.no-margin {
  margin-bottom: 0;
}

:deep(.el-drawer__body) {
  padding: 20px 0;
  background: #fff;
}

.attachments-container {
  margin-top: 20px;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #ebeef5;
}

.attachments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.attachments-title {
  font-weight: 600;
  color: #303133;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.attachments-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #409eff;
  border-radius: 2px;
}

.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 8px;
}

.attachments-list::-webkit-scrollbar {
  width: 6px;
}

.attachments-list::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 3px;
}

.attachments-list::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}

.attachments-list::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}

.attachment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  position: relative;
  overflow: visible;
}

.attachment-item:hover {
  background: #f0f2f5;
  border-color: #409eff;
  transform: translateX(4px);
}

.attachment-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #409eff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.attachment-item:hover::before {
  opacity: 1;
}

.attachment-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  margin-right: 24px;
  min-width: 0;
  cursor: pointer;
}

.attachment-name {
  font-weight: 500;
  color: #303133;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.attachment-name::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23409EFF'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.attachment-url {
  color: #409eff;
  text-decoration: none;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attachment-url::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23409EFF'%3E%3Cpath d='M21 13v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7v2H5v14h14v-6h2zm3-8h-6V3l8 8-8 8v-4H9v-6h15z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.attachment-url:hover {
  color: #66b1ff;
  text-decoration: none;
}

:deep(.el-button--danger.is-link) {
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
  height: auto;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

:deep(.el-button--danger.is-link:hover) {
  background: #fef0f0;
  color: #f56c6c;
  transform: translateY(-1px);
}

:deep(.el-button--danger.is-link:active) {
  transform: translateY(0);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

:deep(.el-button--primary) {
  padding: 8px 20px;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  height: auto;
  min-width: 100px;
  justify-content: center;
}

:deep(.el-button--primary::before) {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

:deep(.el-button--primary:active) {
  transform: translateY(0);
  box-shadow: none;
}
</style>
